<template>
  <div>
    <Dialog :title="title" :model-value="visible" width="900px" :before-close="closeForm">
      <el-tabs v-model="active" @tab-change="loadMsgs">
        <el-tab-pane
          v-for="item in forms"
          :key="item.FormId"
          :name="item.FormId"
          :label="item.FormName + (item.IsDefault ? '(默认)' : '')"
        >
          <div style="text-align: right">
            <BaseButton type="success" size="small" @click="add">添加</BaseButton>
          </div>
          <Table :data="msgList" :columns="columns" @change="loadMsgs">
            <template #dataType="e">
              <span v-if="MsgDataType[e.row.DataType]">
                {{ MsgDataType[e.row.DataType].text }}</span
              >
            </template>
            <template #sort="e">
              <BaseButton
                v-if="e.row.sort != 1"
                :icon="upIcon"
                size="small"
                style="float: left"
                circle
                @click="upItem(e.row)"
              />
              <BaseButton
                v-if="e.row.sort != msgList.length"
                size="small"
                style="float: right"
                :icon="downIcon"
                circle
                @click="downItem(e.row, e.index)"
              />
            </template>
            <template #show="e">
              <span v-if="e.row.DataType == 0"> {{ e.row.Value }}</span>
              <span v-else>{{ e.row.Show }}</span>
            </template>
            <template #action="e">
              <BaseButton
                :icon="editIcon"
                size="small"
                type="primary"
                circle
                @click="edit(e.row)"
              />
              <BaseButton
                size="small"
                :icon="dropIcon"
                type="danger"
                circle
                @click="remove(e.row)"
              />
            </template>
          </Table>
        </el-tab-pane>
      </el-tabs>
    </Dialog>
    <flowAppMsgEdit
      key="flowAppMsgEdit"
      :form-id="formId"
      :source="curItem"
      v-model:visible="editVisible"
      @save="saveItem"
    />
  </div>
</template>

<script>
import { DictItemDic, MsgDataType } from '@/flow/config/flowConfig'
import { GetForms } from '@/flow/api/flow'
import * as appMsgApi from '@/flow/api/flowAppMsg'
import { Dialog } from '@/components/Dialog'
import { Table } from '@/components/Table'
import { useIcon } from '@/hooks/web/useIcon'
import flowAppMsgEdit from './flowAppMsgEdit.vue'
export default {
  components: {
    Dialog,
    Table,
    flowAppMsgEdit
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    },
    flowId: {
      type: String,
      default: null
    },
    appName: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      MsgDataType,
      dropIcon: useIcon({ icon: 'ep:delete' }),
      editIcon: useIcon({ icon: 'ep:edit' }),
      upIcon: useIcon({ icon: 'ep:sort-up' }),
      downIcon: useIcon({ icon: 'ep:sort-down' }),
      title: '编辑流程消息模版',
      active: null,
      curItem: null,
      editVisible: false,
      forms: [],
      maxSort: 1,
      msgList: [],
      source: null,
      curId: 1,
      formId: null,
      columns: [
        {
          field: 'Label',
          label: '文本',
          align: 'center',
          width: 120
        },
        {
          field: 'DataType',
          label: '数据类型',
          align: 'center',
          slotName: 'dataType',
          width: 100
        },
        {
          field: 'Show',
          label: '说明',
          align: 'left',
          minWidth: 120,
          slotName: 'show'
        },
        {
          field: 'Sort',
          label: '排序',
          align: 'center',
          width: 120,
          slotName: 'sort'
        },
        {
          field: 'Action',
          label: '操作',
          align: 'left',
          width: 120,
          slotName: 'action'
        }
      ]
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.active = null
          this.curId = 1
          this.loadForm()
        }
      },
      immediate: true
    }
  },
  methods: {
    add() {
      this.curItem = null
      this.editVisible = true
    },
    edit(row) {
      this.curItem = row
      this.editVisible = true
    },
    remove(row) {
      const index = this.source.findIndex((a) => a.id === row.id)
      if (index !== -1) {
        this.source.splice(index, 1)
        this.msgList = this.msgList.filter((a) => a.id !== row.id)
        this.save()
      }
    },
    upItem(row) {
      const index = this.source.findIndex((a) => a.id === row.id)
      if (index > 0) {
        const t = this.source[index]
        this.source[index] = this.source[index - 1]
        this.source[index - 1] = t
        this.loadMsgs()
      }
    },
    downItem(row) {
      const index = this.source.findIndex((a) => a.id === row.id)
      if (index < this.source.length) {
        const t = this.source[index]
        this.source[index] = this.source[index + 1]
        this.source[index + 1] = t
        this.save()
      }
    },
    saveItem(id, data) {
      if (id == null) {
        data.id = this.curId
        data.FormId = this.formId
        this.curId = this.curId + 1
        this.source.push(data)
        this.msgList.push(data)
      } else {
        const item = this.source.find((c) => c.id === id)
        item.Label = data.Label
        item.DataType = data.DataType
        item.Value = data.Value
        item.ColId = data.ColId
        item.Keywords = data.Keywords
        item.IsRow = data.IsRow
        item.IsRed = data.IsRed
        item.Show = data.Show
      }
      this.save()
    },
    async save() {
      const datas = this.msgList.map((a) => {
        const data = Object.assign({}, a)
        delete data.id
        delete data.FormId
        delete data.sort
        return data
      })
      await appMsgApi.Set(this.id, this.formId, datas)
      this.$message({
        type: 'success',
        message: '保存成功!'
      })
      this.loadMsgs()
    },
    async loadForm() {
      const data = await GetForms(this.flowId)
      this.forms = data
      if (data && data.length > 0) {
        this.active = data.find((c) => c.IsDefault).FormId
      } else {
        this.active = null
      }
      this.title = this.appName + '流程消息模版编辑'
      this.loadList()
    },
    closeForm() {
      this.$emit('update:visible', false)
    },
    loadMsgs() {
      if (this.forms && this.forms.length > 0 && this.active != null) {
        const form = this.forms.find((c) => c.FormId == this.active)
        this.formId = form.FormId
        const items = this.source.filter((c) => c.FormId === form.FormId)
        for (let i = 0; i < items.length; i++) {
          items[i].sort = i + 1
        }
        this.msgList = items
      }
    },
    async loadList() {
      const list = await appMsgApi.Gets(this.id)
      list.forEach((c) => {
        c.id = this.curId
        this.curId = this.curId + 1
      })
      this.source = list
      this.loadMsgs()
    }
  }
}
</script>
